<template>
	<view class="wanlshop-container">
		<view
			v-if="common.modulesData.homeModules.page"
			class="wanlshop-container__head"
			:style="{
				height: headHeight + 'px'
			}"
		>
			<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }" >
				<view class="navigater flex align-center justify-between">
					<!-- <view class="flex" @tap="scanCode">
						<view class="text-xxl"><text class="wlIcon-saoyisao"></text></view>
					</view> -->
					<view class="search flex align-center">
						<view class="scan" @tap="scanCode"></view>
						<view class="line"></view>
						<view class="text-df text-bold wanl-gray-dark s-icon">
							<text class="wlIcon-sousuo1"></text>
						</view>
						<!-- 修复闪烁问题 -->
						<text class="wanl-gray-dark" @tap="handleSearch('')">搜索 商品、类目</text>
						<!-- 
						<swiper vertical autoplay circular interval="3000">
							<swiper-item @tap="handleSearch('')">
								<text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
							</swiper-item>
							<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords" @tap="handleSearch(item.keywords)" >
								<text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
							</swiper-item>
						</swiper> -->
					</view>
					
					<view class="flex">
						<view class="text-xxl position-relative quan" @tap="$wanlshop.to('/pages/user/coupon/list')">
							<!-- <text class="wlIcon-coupon"/> -->
							<view class="cu-tag badge">减</view>
						</view>
						
						<view class="text-xxl notice" @tap="$wanlshop.to('/pages/notice/notice')">
							<!-- <text class="wlIcon-xiaoxizhongxin"></text> -->
						</view>
					</view>
				</view>
				
				
				<view 
				style="margin-top: 16rpx;"
				class="toolbar flex padding-lr-bj align-center">
					<scroll-view
						class="scroll"
						scroll-x
						scroll-with-animation
						:scroll-left="scrollLeft"
					>
						<view class="scroll__item" :class="{ action: currentItemId === 'follow' }" @tap="handleSelect('follow', 0)" >
							关注
						</view>
						<view class="scroll__item" :class="{ action: currentItemId === 'home' }" @tap="handleSelect('home', 1)" >
							推荐
						</view>
						<view class="scroll__item" v-for="(item, index) in common.modulesData.categoryModules" :key="item.id" :class="{ action: currentItemId === 'cid' + item.id }" @tap="handleSelect('cid' + item.id, index + 2)" >
							{{ item.name }}
						</view>
					</scroll-view>
					<view class="category flex align-center" @tap="handleModal('category')">
						<text v-if="modalName == 'category'" class="wlIcon-fanhui3"></text>
						<text v-else class="wlIcon-fanhui4"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<swiper
			style="margin-top: 16rpx;"
			class="wanlshop-container__main"
			:current-item-id="currentItemId"
			:style="{
				height: windowHeight + 'px'
			}"
			@change="changeCurrent"
			@animationfinish="animationFinish"
		>
			<!-- 发现页 -->
			<swiper-item item-id="follow">
				<wanl-shop-find
					:windowHeight="windowHeight"
					:headHeight="headHeight"
					:currentItemId="currentItemId"
					:homeModules="common.modulesData.homeModules"
					:appConfig="common.appConfig"
					:user="user"
				/>
			</swiper-item>
			
			<!-- 主页 -->
			<swiper-item item-id="home">
				<wanl-shop-page
					:windowHeight="windowHeight"
					:headHeight="headHeight"
					:headTop="headTop"
					:pageModules="common.modulesData.homeModules"
					:adData="common.adData"
				/>
			</swiper-item>
			<!-- 分类 -->
			<swiper-item
				v-for="(item, index) in common.modulesData.categoryModules"
				:key="item.id"
				:item-id="'cid' + item.id"
			>
				<wanl-shop-category
					:cid="item.id"
					:headHeight="headHeight"
					:windowHeight="windowHeight"
					:currentItemId="currentItemId"
					:homeModules="common.modulesData.homeModules"
					:childlist="item.childlist"
				/>
			</swiper-item>
		</swiper>
		<!-- 弹窗 -->
		<view @touchmove.stop.prevent="moveHandle">
			<!-- 分享 -->
			<view
			  style="background-color: #f00;border: 10px solid #000; height: 200px;"
			 class="cu-modal1 bottom-modal show">
				123 lorem
			</view>
			
			
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import wanlShopPage from '@/components/wanl-shop/page';
import wanlShopFind from '@/components/wanl-shop/find';
import wanlShopCategory from '@/components/wanl-shop/category';

export default {
	components: {
		wanlShopPage,
		wanlShopFind,
		wanlShopCategory
	},
	computed: {
		...mapState(['common', 'user', 'update'])
	},
	data() {
		return {
			modalName: '',
			scrollAnimation: 300,
			headHeight: 75,
			windowHeight: 0,
			headTop: 0,
			currentItemId: 'home',
			currentData: {},
			scrollLeft: 0,
			contentText: {
				contentdown: '下拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '我是有底线的'
			}
		};
	},
	onShow() {
		// #ifdef APP-PLUS
		plus.navigator.setFullscreen(false);
		// #endif
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height + uni.upx2px(60);
		this.windowHeight = sys.windowHeight;
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: this.$store.state.common.modulesData.homeModules.page
					? this.$store.state.common.modulesData.homeModules.page.style
							.navigationBarTextStyle
					: '',
				backgroundColor: this.$store.state.common.modulesData.homeModules.page
					? this.$store.state.common.modulesData.homeModules.page.style
							.navigationBarBackgroundColor
					: ''
			});
		}, 200);
	},
	onReady() {
		// 判断网络类型
		uni.getNetworkType({
			success: res => {
				if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
					this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
				} else if (res.networkType == 'none') {
					this.$wanlshop.msg('没有网络');
				}
			}
		});
	},
	onLoad(query) {
		// 判断是否小程序来源
		if(query.hasOwnProperty('scene')){
			let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
			console.log('微信小程序：',scene);
		}
	},
	methods: {
		...mapActions({
			download: 'update/download', // 立即下载
			ignore: 'update/ignore' // 忽略更新
		}),
		// 选择Tag
		handleSelect(id, index) {
			this.currentItemId = id;
			this.scrollLeft = (index - 1) * 50;
		},
		// 动画
		animationFinish(e) {
			//#ifdef APP-PLUS
			this.changeCurrent(e);
			//#endif
		},
		// 滚动的tag
		changeCurrent(e) {
			this.currentItemId = e.detail.currentItemId;
			this.scrollLeft = (e.detail.current - 1) * 50;
		},
		// 弹出层
		handleModal(name) {
			// 滚动分享
			if (name == 'share') {
				setTimeout(() => {
					this.scrollAnimation = 0;
				}, 300);
			}
			// 强制关闭海报
			if(this.modalName == 'share'){
				this.$refs.wanlShare.closePoster();
			}
			this.modalName = this.modalName ? null : name;
		},
		// 扫码
		scanCode() {
			// #ifndef H5
			uni.scanCode({
				success: res => {
					let query = this.$wanlshop.getParam(res.result),
						id = query.id;
					switch (query.qr) {
						case 'g':
							this.onGoods(id);
							break;
						case 'gr':
							this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`);
							break;	
						case 'u':
							this.$wanlshop.to(`/pages/user/info?id=${id}`);
							break;
						case 'fu':
							this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
							break;
						case 'c':
							this.$wanlshop.on('/pages/category');
							break;
						case 'p':
							this.$wanlshop.to(`/pages/page/index?id=${id}`);
							break;
						case 's':
							this.onShop(id);
							break;
						case 'live':
							// #ifdef APP-PLUS || MP-WEIXIN
							this.$wanlshop.auth(`/pages/shop/live/live`);
							// #endif
							// #ifndef APP-PLUS || MP-WEIXIN
							this.$wanlshop.msg('目前只开放App和微信小程序直播');
							// #endif
							break;
						case 'chat':
							this.toChat(id);
							break;
					}
				}
			});
			// #endif
			// #ifdef H5
			this.$wanlshop.msg('暂不支持H5扫码');
			// #endif
		},
		// 搜索
		handleSearch(text) {
			this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
		},
		//禁止父元素滑动 1.0.3升级
		moveHandle() {}
	}
};
</script>

<style lang="scss">
page{
	background: url(https://dcdn.cxycoder.com/img/home_bg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.quan,.notice{
	width: 80rpx;
	height: 80rpx;
}
.quan{
	background: url(https://dcdn.cxycoder.com/home/quan.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin-right: 10rpx;
}
.notice{
	background: url(https://dcdn.cxycoder.com/home/notice.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.wanlshop-container {
	&__head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: white;
		background-image: url(https://dcdn.cxycoder.com/img/home_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		.navigater {
			height: 86rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 200rpx;
			/* #endif */
			.search {
				flex: 1;
				background-color: #fff;
				height: 80rpx;
				border: 5rpx solid #0499FD;
				margin-right: 10rpx;
				border-radius: 15rpx; 
				.s-icon{
					margin: 0 15rpx;
				}
				.line{
					width: 3rpx;
					height: 30rpx;
					background: url(https://dcdn.cxycoder.com/home/line.png);
					background-repeat: no-repeat;
					background-size: 100% auto;
				}
				.scan{
					width: 30rpx;
					height: 30rpx;
					background: url(https://dcdn.cxycoder.com/home/scan.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin: 0 15rpx;
				}
				.icon {
					margin: 0 20rpx;
				}
				swiper {
					height: 100%;
					width: 60%;
					margin-right: 10rpx;
					swiper-item {
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.toolbar {
			.scroll {
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				width: 100%;
				&__item {
					position: relative;
					z-index: 2;
					font-size: 26rpx;
					display: inline-flex;
					height: 58rpx;
					align-items: center;
					margin-right: 40rpx;
					color: #000000;
					&.action {
						position: relative;
						font-weight: bold;
						font-size: 30rpx;
						color: #0499FD;
						&::after {
							content: ' ';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							height: 4rpx;
							width: 30rpx;
							border-radius: 6rpx;
							background-color: #0499FD;
						}
					}
				}
			}
			.category {
				box-shadow: #eee -16rpx 0 16rpx -16rpx;
				height: 58rpx;
				font-size: 28rpx;
				padding-left: 25rpx;
			}
		}
	}
	&__main {
		position: relative;
		z-index: 99;
	}
	.WANL-MODAL {
		.cu-modal {
			&.top-modal {
				background: rgba(0, 0, 0, 0.6);
				text-align: inherit;
				.cu-dialog {
					background: #fff;
					border-radius: 0 0 18rpx 18rpx;
					.category {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
						grid-auto-flow: row dense;
						grid-gap: 16rpx;
						.item {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 12rpx 0;
							border: 2rpx solid transparent;
							&.action {
								background-color: transparent;
								border-color: #0499FD;
								color: #0499FD;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
}
</style>
